<template>
  <div>
    <a-tabs default-active-key="1" type="card">
      <a-tab-pane key="1" tab="概念图谱">
        <div style="height:calc(100vh - 140px);">
          <SeeksRelationGraph
            ref="seeksRelationGraph"
            :on-line-click="onLineClick"
            :on-node-db-click="onNodeClick"
            :options="graphOptions"
          />
          <transition name="slide-fade">
            <relation-graph-setting
              v-if="viewSetting"
              :default-setting="graphOptions"
              :origin-style="{'z-index':'12','height':'100%','position':'absolute','top':'55px'}"
              @close="viewSetting=false"
              @configChange="relationGraphConfigChange"
              @save="savePosition"></relation-graph-setting>
          </transition>
          <transition name="slide-fade">
            <relation-graph-node-setting
              v-if="viewNodeSetting"
              ref="graphNodeSetting"
              :origin-style="{'z-index':'12','height':'100%','position':'absolute','top':'55px'}"
              @close="nodeOptionClose"
              @configChange="relationGraphNodeConfigChange"
              @saveOption="savePosition"></relation-graph-node-setting>
          </transition>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" force-render tab="概念列表">
        <a-card :bodyStyle="tstyle" :bordered="false">
          <div v-if="hasPerm('schema:page')" class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="48">
                <a-col :md="8" :sm="24">
                  <a-form-item label="名称">
                    <a-input v-model="queryParam.name" allow-clear placeholder="请输入名称" />
                  </a-form-item>
                </a-col>
                <template v-if="advanced">
                  <a-col :md="8" :sm="24">
                    <a-form-item label="别名">
                      <a-input v-model="queryParam.synonym" allow-clear placeholder="请输入别名" />
                    </a-form-item>
                  </a-col>
                  <a-col :md="8" :sm="24">
                    <a-form-item label="唯一标识">
                      <a-input v-model="queryParam.uniqueId" allow-clear placeholder="请输入唯一标识" />
                    </a-form-item>
                  </a-col>
                  <a-col :md="8" :sm="24">
                    <a-form-item label="释义">
                      <a-input v-model="queryParam.paraphse" allow-clear placeholder="请输入释义" />
                    </a-form-item>
                  </a-col>
                  <a-col :md="8" :sm="24">
                    <a-form-item label="描述">
                      <a-input v-model="queryParam.desc" allow-clear placeholder="请输入描述" />
                    </a-form-item>
                  </a-col>
                </template>
                <a-col :md="8" :sm="24">
                  <span class="table-page-search-submitButtons">
                    <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                    <a-button style="margin-left: 8px" @click="() => (queryParam = {})">重置</a-button>
                    <a style="margin-left: 8px" @click="toggleAdvanced">
                      {{ advanced ? '收起' : '展开' }}
                      <a-icon :type="advanced ? 'up' : 'down'" />
                    </a>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </a-card>
        <a-card :bordered="false">
          <s-table
            ref="table"
            :alert="true"
            :columns="columns"
            :data="loadData"
            :enable-drag="true"
            :rowKey="(record) => record.id"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            :scroll="{x:'true'}"
          >
            <template v-if="hasPerm('schema:add')" slot="operator" class="table-operator">
              <a-button
                v-if="hasPerm('schema:add')"
                icon="plus"
                type="primary"
                @click="$refs.addForm.add()"
              >新增概念
              </a-button>
            </template>
            <span slot="action" slot-scope="text, record">
              <a v-if="hasPerm('schema:edit')" @click="viewAttrs(record)">查看属性</a>
              <a-divider
                v-if="hasPerm('schema:edit') & hasPerm('schema:delete')"
                type="vertical"
              />
              <a v-if="hasPerm('schema:edit')" @click="$refs.editForm.edit(record)">编辑</a>
              <a-divider
                v-if="hasPerm('schema:edit') & hasPerm('schema:delete')"
                type="vertical"
              />
              <a-popconfirm
                v-if="hasPerm('schema:delete')"
                placement="topRight"
                title="若存在关联关系也将被删除,确定删除?"
                @confirm="() => schemaDelete(record)"
              >
                <a>删除</a>
              </a-popconfirm>
            </span>
          </s-table>
          <add-form ref="addForm" @ok="handleOk" />
          <edit-form ref="editForm" @ok="handleOk" />
          <prop-index ref="propIndex" @ok="handleOk" />
        </a-card>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import { RelationGraphNodeSetting, RelationGraphSetting, STable } from '@/components'
import { schemaDelete, schemaPage, schemaRelation } from '@/api/modular/main/knowl/schema/schemaManage'
import { graphAdd } from '@/api/modular/main/knowl/graph/graphManager'
import { setting } from '@/api/modular/main/knowl/graphSetting/graphSettingManage'
import addForm from './addForm.vue'
import editForm from './editForm.vue'
import propIndex from './property/propIndex.vue'
import SeeksRelationGraph from 'relation-graph'

export default {
  name: 'Demo',
  components: {
    RelationGraphSetting,
    RelationGraphNodeSetting,
    STable,
    addForm,
    editForm,
    propIndex,
    SeeksRelationGraph
  },
  data() {
    return {
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 表头
      columns: [
        {
          title: '名称',
          align: 'center',
          dataIndex: 'name',
          ellipsis: true,
          minWidth: 100,
          width: 100,
          drag: true,
          customCell: (record, rowIndex) => {
            return this.labelCustomStyle
          }
        },
        {
          title: '别名',
          width: 100,
          align: 'center',
          dataIndex: 'synonym',
          ellipsis: true,
          minWidth: 100,
          drag: true,
          customCell: (record, rowIndex) => {
            return this.labelCustomStyle
          }
        },
        {
          title: '唯一标识',
          align: 'center',
          dataIndex: 'uniqueId',
          drag: true,
          width: 100,
          ellipsis: true,
          minWidth: 100,
          customCell: (record, rowIndex) => {
            return this.labelCustomStyle
          }
        },
        {
          title: '释义',
          align: 'center',
          drag: true,
          dataIndex: 'paraphrase',
          ellipsis: true,
          width: 200,
          minWidth: 200,
          customCell: (record, rowIndex) => {
            return this.labelCustomStyle
          }
        },
        {
          title: '描述',
          align: 'center',
          drag: true,
          dataIndex: 'describes',
          ellipsis: true,
          minWidth: 200,
          width: 200,
          customCell: (record, rowIndex) => {
            return this.labelCustomStyle
          }
        },
        {
          title: '属性个数',
          align: 'center',
          dataIndex: 'attrNum',
          width: 80,
          ellipsis: true,
          minWidth: 80,
          drag: true
        },
        {
          title: '关系个数',
          align: 'center',
          dataIndex: 'relationNum',
          width: 80,
          ellipsis: true,
          minWidth: 80,
          drag: true
        },
        {
          title: '修改次数',
          align: 'center',
          dataIndex: 'modifyNum',
          width: 80,
          ellipsis: true,
          minWidth: 80,
          drag: true
        }
      ],
      tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return schemaPage(Object.assign(parameter, this.queryParam)).then((res) => {
          const data = res.data
          data.rows.forEach((e) => {
            if (!e.hasOwnProperty('attrNum')) {
              e['attrNum'] = 0
            }
            if (!e.hasOwnProperty('relationNum')) {
              e['relationNum'] = 0
            }
          })
          return data
        })
      },
      viewSetting: false,
      viewNodeSetting: false,
      parentIdData: [],
      selectedRowKeys: [],
      selectedRows: [],
      graphJsonData: {},
      nodeStyleMap: [{ 'disableDragNode': 'disableDrag' }, { 'defaultNodeColor': 'color' }, { 'defaultNodeFontColor': 'fontColor' }, { 'defaultNodeShape': 'nodeShape' }],
      graphOptions: {
        'backgrounImage': '',
        'backgrounImageNoRepeat': false,
        'layouts': [
          {
            'label': '中心',
            'layoutName': 'center',
            'layoutClassName': 'seeks-layout-center',
            'distance_coefficient': 1
          }
        ],
        'defaultLineMarker': {
          'markerWidth': 12,
          'markerHeight': 12,
          'refX': 6,
          'refY': 6,
          'data': 'M2,2 L10,6 L2,10 L6,6 L2,2'
        },
        'allowShowMiniNameFilter': false,
        'allowShowMiniToolBar': true,
        'allowSwitchLineShape': true,
        'isMoveByParentNode': false,
        'defaultNodeWidth': 65,
        'defaultNodeHeight': 65,
        'defaultShowLineLabel': true,
        'disableZoom': false,
        'disableDragNode': false,
        'hideNodeContentByZoom': true,
        'defaultNodeColor': '#1e90ff',
        'defaultNodeBorderColor': '#00CED1',
        'defaultNodeFontColor': '#ffffff',
        'defaultNodeBorderWidth': 0,
        'defaultNodeShape': 0,
        'defaultLineColor': '#2a75be',
        'defaultLineWidth': 2,
        'defaultLineShape': 3,
        'defaultJunctionPoint': 'border',
        'defaultExpandHolderPosition': 'hide'
      }
    }
  },
  mounted() {
    this.showSeeksGraph()
    const div = document.createElement('div')
    div.setAttribute('id', 'sdd')
    div.innerHTML = '<svg aria-hidden="true" style="position:"absolute";width:"0px";height:"0px";overflow:"hidden""><symbol id="icon-save" viewBox="0 0 1024 1024"><path d="M955.635652 162.635294C901.423887 96.376471 823.118005 60.235294 738.788593 60.235294c-90.352941 0-171.670588 42.164706-225.882353 111.435294-36.141176-48.188235-84.329412-81.317647-144.564706-99.388235-72.282353-21.082353-150.588235-15.058824-216.847059 21.082353-138.541176 75.294118-192.752941 246.964706-117.458823 385.505882 15.058824 30.117647 36.141176 57.223529 63.247059 81.317647l3.011764 3.011765s325.270588 346.352941 349.364706 373.458824c15.058824 18.070588 39.152941 27.105882 63.247059 27.105882 21.082353 0 42.164706-9.035294 57.223529-21.082353l3.011765-3.011765c24.094118-24.094118 337.317647-358.4 349.364706-373.458823l3.011765-3.011765c117.458824-105.411765 129.505882-283.105882 30.117647-400.564706z m-60.235294 349.364706l-27.105883 27.105882c-60.235294 66.258824-313.223529 337.317647-337.317647 361.411765-12.047059 9.035294-27.105882 9.035294-39.152941-3.011765-21.082353-21.082353-280.094118-301.176471-337.317647-361.411764-3.011765-3.011765-24.094118-27.105882-24.094118-27.105883-15.058824-15.058824-30.117647-33.129412-42.164706-57.223529C31.023887 343.341176 70.176828 204.8 181.612122 147.576471c51.2-30.117647 114.447059-36.141176 171.670589-18.070589 57.223529 18.070588 105.411765 57.223529 132.517647 111.435294 6.023529 9.035294 15.058824 15.058824 27.105882 15.058824s21.082353-6.023529 27.105882-15.058824c39.152941-75.294118 114.447059-120.470588 198.776471-120.470588 66.258824 0 129.505882 30.117647 171.670588 81.317647 78.305882 93.364706 69.270588 225.882353-15.058823 310.211765z" p-id="10185"></path></symbol>' +
      '<symbol id="icon-style" viewBox="0 0 1024 1024"><path d="M580.608 776.192c-14.336 10.24-18.432 30.208-8.192 44.544 6.144 9.216 16.384 13.824 26.112 13.824 6.144 0 12.8-2.048 18.432-5.632 20.48-14.336 32.256-38.4 30.208-62.976-1.536-18.944-9.728-35.84-24.064-48.64-14.336-12.288-32.256-18.432-51.2-16.896-18.944 1.536-35.84 9.728-48.64 24.064-12.288 14.336-18.432 32.256-16.896 51.2 1.024 16.896 15.36 29.696 31.744 29.696h2.048c17.408-1.024 30.72-16.384 29.696-34.304 0-2.048 1.024-4.096 1.536-5.12s2.048-2.048 4.608-2.048c2.048 0 4.096 1.024 5.12 1.536 1.024 1.024 2.048 2.048 2.048 4.608 0.512 4.096-1.536 5.632-2.56 6.144z" fill="#515151" p-id="2894"></path><path d="M861.696 230.4l62.464-108.032c8.704-15.36 3.584-34.816-11.776-43.52s-34.816-3.584-43.52 11.776l-52.736 91.136-32.768 56.832L600.576 555.52c-8.704 15.36-3.584 34.816 11.776 43.52s34.816 3.584 43.52-11.776l171.52-296.96c49.152 69.12 73.216 152.576 69.632 238.592-2.048 46.592-13.312 92.16-33.792 136.192-19.968 43.008-47.104 81.92-81.408 116.224s-73.216 61.44-115.712 81.408c-44.032 20.48-89.6 31.744-136.192 33.792-6.144 0.512-11.776 0.512-17.92 0.512-44.544 0-88.064-7.68-130.048-22.528-10.24-3.584-14.336-11.776-16.384-15.872-1.536-4.608-3.584-13.312 2.048-23.04l56.32-97.792c32.768-56.832 13.312-129.536-43.52-161.792-17.92-10.24-38.4-15.872-59.392-15.872-41.984 0-81.408 22.528-102.912 59.392l-31.744 55.296c-2.56 4.608-6.656 7.168-12.288 7.168-4.096 0-9.728-1.536-12.288-7.68-20.48-44.544-32.256-92.16-34.816-141.824-2.56-53.76 5.632-105.984 24.576-155.648 18.432-47.616 45.568-91.136 81.408-128.512 35.84-37.376 77.824-67.072 124.928-88.064C406.528 138.752 458.24 128 511.488 128c7.68 0 15.872 0 23.552 0.512 50.688 3.072 99.84 15.872 144.896 37.888l9.216 4.608c15.36 8.192 33.792 2.56 42.496-12.288 9.216-15.872 3.072-35.84-12.8-44.544-54.272-28.16-115.2-46.08-180.224-49.664-9.216-0.512-18.432-1.024-27.136-1.024-253.952 0-461.312 214.016-448.512 471.552 3.072 58.88 17.408 114.688 40.448 165.376 13.824 29.696 41.984 45.056 70.656 45.056 26.112 0 52.736-12.8 67.584-38.912l31.744-55.296c10.24-17.408 28.16-27.136 47.104-27.136 9.216 0 17.92 2.048 26.624 6.656 26.624 14.848 35.328 49.152 19.968 75.776l-56.32 97.28c-28.16 49.152-5.632 112.128 48.128 131.584 47.104 16.896 98.304 26.112 151.552 26.112 6.656 0 13.824 0 20.48-0.512 224.256-10.24 417.792-203.776 428.032-428.032 6.656-115.2-31.232-220.672-97.28-302.592z" fill="#515151" p-id="2895"></path></symbol><svg>'
    document.body.firstChild.firstChild.parentNode.appendChild(div)
    this.insertToolbar(this.editOptions, 'icon-style', '设置')
    this.insertToolbar(this.savePosition, 'icon-save', '保存')
  },
  created() {
    if (this.hasPerm('schema:edit') || this.hasPerm('schema:delete')) {
      this.columns.push({
        title: '操作',
        width: '200px',
        align: 'center',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
      })
    }
    const parentIdOption = this.$options
    this.parentIdData = parentIdOption.filters['dictData']('code_gen_query_type')
  },
  methods: {
    viewAttrs(record) {
      record.showRightTool = false
      this.$refs.propIndex.index(record)
    },
    relationGraphNodeConfigChange(obj) {
      const nodes = this.$refs.seeksRelationGraph.getNodes()
      const node = nodes.find((it) => it.id === obj.id)
      if (node) {
        node[obj.key] = obj.value
      }
    },
    relationGraphConfigChange(obj) {
      const node = this.nodeStyleMap.find((it) => it[obj.key] !== undefined)
      if (node) {
        const nodes = this.$refs.seeksRelationGraph.getNodes()
        const nodeKey = node[obj.key]
        const newObj = {
          [nodeKey]: obj.value
        }
        nodes.forEach((it) => {
          Object.assign(it, newObj)
        })
      }
      this.graphOptions[obj.key] = obj.value
      this.$refs.seeksRelationGraph.setOptions(this.graphOptions, () => {
      })
    },
    schemaDelete(record) {
      schemaDelete(record).then((res) => {
        if (res.success) {
          this.$message.success('删除成功')
          this.$refs.table.refresh()
        } else {
          this.$message.error('删除失败') // + res.message
        }
      })
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    handleOk() {
      this.$refs.table.refresh()
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    showSeeksGraph() {
      // this.$refs.seeksRelationGraph.setJsonData(this.graphJsonData, (seeksRGGraph) => {
      // })
      this.refresh()
      // this.$refs.seeksRelationGraph.refresh =  this.refresh;
    },
    onNodeClick(nodeObject) {
      const nodeRef = this.$refs.graphNodeSetting
      const id = nodeRef ? nodeRef.getNodeId() : undefined
      if (id === nodeObject.id) {
        return
      }
      this.clearTempStyle(nodeObject.id)
      this.viewNodeSetting = true
      const style = this.createStyleByNode(nodeObject)
      this.$nextTick(() => {
        this.$refs.graphNodeSetting.initStyle(style, nodeObject.id)
      })
    },
    onLineClick(lineObject, $event) {
    },
    refresh() {
      this.rf()
      this.$refs.seeksRelationGraph.refresh = this.rf
      const miniToolbar = this.$refs.seeksRelationGraph.$children[1]
      miniToolbar.toggleAutoLayout = this.autoLayout
    },
    rf() {
      this.graphSetting()
      schemaRelation().then((res) => {
        const values = res.data
        values.nodes.forEach((it) => {
          const option = this.createNodeOption()
          Object.assign(it, option)
          const styleJson = it.style
          if (styleJson) {
            it.style = styleJson.replaceAll('\\', '')
            const styleObj = JSON.parse(it.style)
            Object.assign(it, styleObj)
          }
        })
        this.graphJsonData = values
        this.$refs.seeksRelationGraph.setJsonData(this.graphJsonData, (seeksRGGraph) => {
          // rf()
        })
        this.autoLayout()
      })
    },
    createStyleByNode(node) {
      return {
        width: node.width,
        height: node.height,
        color: node.color,
        fontColor: node.fontColor,
        nodeShape: node.nodeShape ?? 0,
        fixed: node.fixed ?? false,
        disableDrag: node.disableDrag ?? false,
        disableDefaultClickEffect: node.disableDefaultClickEffect ?? false
      }
    },
    savePosition(option) {
      const setting = {
        defaultNodeColor: this.graphOptions.defaultNodeColor,
        defaultNodeFontColor: this.graphOptions.defaultNodeFontColor,
        defaultNodeShape: this.graphOptions.defaultNodeShape,
        defaultNodeHeight: this.graphOptions.defaultNodeHeight,
        defaultNodeWidth: this.graphOptions.defaultNodeWidth,
        defaultLineColor: this.graphOptions.defaultLineColor,
        defaultLineWidth: this.graphOptions.defaultLineWidth,
        defaultLineShape: this.graphOptions.defaultLineShape,
        defaultShowLineLabel: this.graphOptions.defaultShowLineLabel,
        disableZoom: this.graphOptions.disableZoom,
        disableDragNode: this.graphOptions.disableDragNode
      }
      const positions = []
      if (option) {
        const node = this.graphJsonData.nodes.find((it) => it.id === option.id)
        if (node) {
          node.style = JSON.stringify(option.style)
        }
      }
      const nodes = this.$refs.seeksRelationGraph.getNodes()
      nodes.forEach((it) => {
        positions.push({
          nodeId: it.id,
          x: it.x,
          y: it.y,
          style: JSON.stringify(this.createStyleByNode(it))
        })
      })
      graphAdd({ list: positions, setting: setting }).then((res) => {
        if (res.success) {
          this.$message.success('保存成功')
        } else {
          this.$message.error('保存失败') // + res.message
        }
      })
    },
    insertToolbar(event, icon, btnName) {
      const toolbarContent = document.getElementsByClassName('c-mini-toolbar')[0]
      const originButton = toolbarContent.getElementsByClassName('c-mb-button')[1]
      const newMenu = originButton.cloneNode(true)
      newMenu.addEventListener('click', () => {
        event()
      })
      const newSpan = newMenu.getElementsByTagName('span')[0]
      newSpan.innerText = btnName
      const svg = newMenu.getElementsByTagName('svg')[0]
      const use = svg.getElementsByTagName('use')[0]
      use.setAttribute('xlink:href', '#' + icon)
      toolbarContent.insertBefore(newMenu, toolbarContent.firstChild)
      toolbarContent.style.top = '-10px'
    },
    editOptions() {
      this.viewSetting = !this.viewSetting
    },
    graphSetting() {
      setting().then((res) => {
        if (res.success) {
          this.graphOptions.defaultNodeColor = res.data.defaultNodeColor
          this.graphOptions.defaultNodeFontColor = res.data.defaultNodeFontColor
          this.graphOptions.defaultNodeShape = res.data.defaultNodeShape
          this.graphOptions.defaultNodeHeight = res.data.defaultNodeHeight
          this.graphOptions.defaultNodeWidth = res.data.defaultNodeWidth
          this.graphOptions.defaultLineColor = res.data.defaultLineColor
          this.graphOptions.defaultLineWidth = res.data.defaultLineWidth
          this.graphOptions.defaultLineShape = res.data.defaultLineShape
          this.graphOptions.defaultShowLineLabel = res.data.defaultShowLineLabel
          this.graphOptions.disableZoom = res.data.disableZoom
          this.graphOptions.disableDragNode = res.data.disableDragNode
          this.$refs.seeksRelationGraph.setOptions(this.graphOptions, () => {
          })
        } else {
          this.$message.error('获取配置信息失败') // + res.message
        }
      })
    },
    createNodeOption() {
      const option = this.graphOptions
      return {
        width: option.defaultNodeWidth,
        height: option.defaultNodeHeight,
        color: option.defaultNodeColor,
        fontColor: option.defaultNodeFontColor,
        nodeShape: option.defaultNodeShape,
        fixed: true,
        disableDrag: option.disableDragNode ?? false,
        disableDefaultClickEffect: false
      }
    },
    autoLayout() {
      const graph = this.$refs.seeksRelationGraph
      const graphSetting = this.$refs.seeksRelationGraph.graphSetting
      graphSetting.autoLayouting = !graphSetting.autoLayouting
      if (graphSetting.autoLayouting) {
        if (!graphSetting.layouter.autoLayout) {
          console.log('当前布局不支持自动布局！')
        } else {
          const nodes = this.$refs.seeksRelationGraph.getNodes()
          for (const i in nodes) {
            const node = graph.getNodeById(nodes[i].id)
            node.lot.placed = true
            this.$delete(node, 'fixed')
          }
          graphSetting.layouter.autoLayout(true)
        }
      } else {
        if (!graphSetting.layouter.stop) {
          console.log('当前布局不支持自动布局stop！')
        } else {
          graphSetting.layouter.stop()
        }
      }
    },
    nodeOptionClose(id) {
      this.clearTempStyle(id)
      this.viewNodeSetting = false
    },
    clearTempStyle(id) {
      const nodes = this.$refs.seeksRelationGraph.getNodes()
      const node = nodes.find((it) => it.id === id)
      if (node) {
        const originNode = this.graphJsonData.nodes.find((it) => it.id === id)
        if (originNode) {
          const originStyle = JSON.parse(originNode.style)
          Object.assign(node, originStyle)
        }
      }
    }
  }
}
</script>
<style lang='less' scoped>
.table-operator {
  margin-bottom: 18px;
}

button {
  margin-right: 8px;
}

.ant-tabs-tab {
  font-weight: 700;
  font-size: 15px;
}

.ant-tabs-nav .ant-tabs-tab-active {
  font-weight: 700;
  font-size: 15px;
}

.slide-fade-enter-active {
  transition: all .4s ease;
}

.slide-fade-leave-active {
  transition: all .5s cubic-bezier(1.0, 0.5, 0.5, 1.0);
}

.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
</style>
